﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>remove vs empty vs detach</title>
</head>
<body>
    <!--<div class="content">
        <div class="hai">Hai</div>
        <div class="goodevening">good evening</div>
    </div>-->

    <p>Hai!</p>

    Good

    <p>Afternoo</p>

    <button>Attach/detach paragraphs</button>
</body>
</html>
<script src="Scripts/jquery-2.1.4.js"></script>
<script language="javascript">
    //$(function () {
    //    //$("div.hai").empty();
    //    //$("div.hai").remove();
    //});
   
    var p;
    $("button").click(function () {
        if (p) {
            p.appendTo("body");
            p = null;
        } else {
            p = $("p").detach();
        }
    });

    //The .detach() method removes the selected elements, including all text and child nodes. However, 
    //it keeps data and events. This method also keeps a copy of the removed elements, 
    //which allows them to be reinserted at a later time.

</script>